<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="home/public/head::head(~{::title},~{::style},~{})">
    <title>新闻详情-新闻管理系统</title>
    <style>
        .content{
            padding-top: 20px;
            margin-left: 10%;
            margin-right: 10%;
            padding-bottom: 30px;
            width: 80%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-height: 550px;
            background-color: white;
        }
        .content-top{
            width: 98%;
            margin: 1%;
            min-height: 300px;
        }
        .content-top img{
            max-width: 100%;
        }
        .top-left{
            width: 35%;
            border-right: 2px solid #e1e1e8;
        }
        .top-left img{
            height: 500px;
        }
        .top-middle{
            width: 30%;
            text-align: left;
            padding-left: 10px;
            font-size: 20px;
            border-right: 2px solid #e1e1e8;
            height: 500px;
        }
        .top-title{
            font-size: 30px;
            width: 100%;
            border-bottom: 2px solid #e1e1e8;
            margin-bottom: 10px;
            text-align: center;
        }
        .top-score{
            color: #e38d13;
            font-family: "Adobe 黑体 Std R";
            font-style: italic;
            font-size: 25px;
        }
        .top-right{
            width: 35%;
            text-align: left;
        }
        .right-content{
            font-size: 15px;
            line-height: 25px;
        }
        /********************************/
        .content-middle{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 2% 0;
            border-top:2px solid #e1e1e8;
            padding: 2% 0;

        }
        .layui-icon-img{
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border-radius: 50%;
            cursor: pointer;
        }

        .middle-score{
            display: flex;
            width: 100%;
            align-items: center;
            flex-direction: row;
        }
        .middle-score input{
            width: 70%;
            height: 34px;
            margin: 0px 20px;
            border: 1px solid #e1e1e8;
            border-radius: 10px;
        }
        input::-webkit-input-placeholder {
            color: #aab2bd;
            font-size: 20px;
            text-align: center;
        }

        .middle-user-content{
            width: 100%;
            margin-top: 1%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .content-item{
            width: 100%;
            padding: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-bottom: 2px solid #e0e0e0;
        }
        .content-detail{
            width: 97%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .content-item img{
            width: 50px;
            height: 50px;
            border-radius: 100px;
            margin: 0px 10px;
        }
        .content-item span{
            margin: 0px 5px;
        }
        .postact{
            color: white;
            float: right;
            cursor: pointer;
            font-size: 12px;
            padding: 5px 10px;
            background-color: #32b487;
        }


    </style>
</head>
<body>

<!--顶部导航栏导入-->
<div th:replace="home/public/top-menu::top-menu"></div>
<div  style="background-color: #F2F2F2;" id="container" v-cloak>
    <input type="hidden" v-model="newsId" id="newsId" name="newsId" />
    <input type="hidden" id="userId" name="userId" th:if="${session.user!=null}" th:value="${session.user.id}"/>
    <div class="content">
        <div class="top-title">
            <span th:text="${news.title}"></span>
            <a class="postact"  onclick="softDelPost()" th:if="${session.user!=null && session.user.id==news.userId}">删除</a>
            <a class="postact" th:href="'/home/news/homeEditPage/'+${news.id}"  th:if="${session.user!=null && session.user.id==news.userId }">修改</a>
        </div>
        <div class="col-md-12 " >
            <div class="text-center" style="margin-left: -20px">
                <span style="background-color: #e38d13;padding: 2px" th:text="${news.categoryName}"></span>
                <img th:src="@{${newsUser}==null?'/static/home/images/user-head/1.jpg':${'/file/fileDown?saveName='+newsUser.field1}}"
                     class="layui-nav-img" th:text="${newsUser?.name}"/>
                <a th:if="${session.user!=null && session.user.id!=news.userId}" href="javascript:void(0)">
                    <img th:onclick="'javascript:userAttention('+${news.userId}+',1)'" th:data="${news.userId}" th:title="关注"  th:if="${!if_attention}" class="layui-icon-img" th:src="@{/home/images/icon/attention1.png}"/>
                    <img th:onclick="'javascript:userAttention('+${news.userId}+',2)'"   th:title="取关" th:if="${if_attention}" class="layui-icon-img" th:src="@{/home/images/icon/attention2.png}"/>
                    <img th:onclick="'javascript:newsFavor('+${news.id}+',1)'"  th:title="点赞" th:if="${!if_favor}" class="layui-icon-img" th:src="@{/home/images/icon/favor1.png}" />
                    <img th:onclick="'javascript:newsFavor('+${news.id}+',2)'"  th:title="取赞" th:if="${if_favor}" class="layui-icon-img" th:src="@{/home/images/icon/favor2.png}"/>
                    <img th:onclick="'javascript:newsForward('+${news.id}+')'"  th:title="转发" class="layui-icon-img" th:src="@{/home/images/icon/share.png}"/>
                </a>
                <!--<span th:text="${news.userName}"></span>-->
                <span th:if="${session.user==null || session.user.id==news.userId}" th:text="${#temporals.format(news.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
            </div>
        </div>
        <div class="content-top">
           <div th:utext="${news.content}">

           </div>
        </div>
        <div class="content-middle">
            <div class="middle-score">
                <span style="font-size: 25px;margin: 0px 10px;">请进行评论</span>
                <input  type="text" id="content" name="content" placeholder="请输入评论信息"/>
                <a id="mySubmit"  th:if="${session.user!=null&&session.user.state==1}" class="layui-btn btn-sm" style="width: 100px;line-height: 2.5">提交</a>
                <a href="javascript:void(0)" th:if="${session.user!=null&&session.user.state==0}" class="layui-btn btn-sm layui-btn-danger" style="width: 100px;height: 34px">已被禁言</a>
                <a href="/home/login" th:if="${session.user==null}" class="layui-btn btn-sm" style="width: 100px;line-height: 2.5">请先登录</a>
            </div>
            <div class="middle-user-content">
                <div class="list-group-item" style="background-color: #e38d13;color: white;width: 100%">用户评论</div>
                <div class="content-item" v-for="item in newsCommentList">
                    <div class="content-detail">
                        <img  v-bind:src="'/file/fileDown?saveName='+item.field1" alt="用户头像">
                        <span style="width: 5%">{{item.userName}}</span>
                        <span style="width: 74%">{{item.content}}</span>
                        <span style="width: 13%">{{item.createTime}}</span>
                    </div>
                    <div class="content-act">
                        <a th:if="${session.user!=null}"  name="adelete" @click="softDel(item.id,item.userId)"
                           style="background-color: #32b487;color: white;cursor: pointer">删除</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="layui-row text-center" style="background-color: white;width: 80%;margin: auto">
        <div id="laypage"></div>
    </div>
</div>

<!-- 底部导航栏 start-->
<footer th:replace="home/public/footer::footer"></footer>
<!-- 底部导航栏end -->

<script th:src="@{/static/common/plugs/vue/vue.js}"></script>

<script type="text/javascript">
    console.log("进入detail页面")
    //登录用户ID
    var loginUserId='[[${session?.user?.id}]]';
    /*初始化layui的分页插件*/
    function initLayui() {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalCount //数据总数，从服务端得到
                , limit: pageSize //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                , limits: [10, 20, 30, 40, 50] //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    pageSize = obj.limit;
                    pageIndex = obj.curr;
                    //首次不执行
                    if (!first) {
                        pagination(obj.curr, obj.limit);
                    }
                }
            });
        });
    }
    function softDelPost() {
        var id=$("#newsId").val();
        var url="/home/news/deleteById";
        $.post(url,{"id":id},function (res) {
            if (res.code=='0000') {
                layer.msg(res.msg, {icon: 1, time: 1500},function(){
                    window.location.href="/home/news/homeListPage";
                });
            } else {
                layer.msg(res.msg, {icon: 2, time: 1500});
            }
        })
    }

    //转发新闻
    function newsForward(newsId) {
        var url="/home/news/forwardPage/"+newsId;
        window.location.href=url;
    }
    //action 1 关注；2 取关
    function userAttention(userId,action) {
        var url="/home/attention/updateAttention";
        $.post(url,{"toUserId":userId,"action":action},function (res) {
            if (res.code=='0000') {
                refresh();
                // layer.msg(res.msg, {icon: 1, time: 1500},function(){
                // });
            } else {
                layer.msg(res.msg, {icon: 2, time: 1500});
            }
        })
    }
    //action 1 点赞；2 取赞
    function newsFavor(newsId,action) {
        var url="/home/newsFavor/updateFavor";
        $.post(url,{"newsId":newsId,"action":action},function (res) {
            if (res.code=='0000') {
                refresh();
                // layer.msg(res.msg, {icon: 1, time: 1500},function(){
                // });
            } else {
                layer.msg(res.msg, {icon: 2, time: 1500});
            }
        })
    }


    function softAddFriend(that) {
        var id=$(that).attr("data-id");
        console.log(id);
        var applyId=loginUserId;
        var friendId=id;
        var url="/home/friend/add";
        $.post(url,{"applyId":applyId,"friendId":friendId},function (res) {
            if (res.success == true) {
                layer.msg(res.msg, {icon: 1, time: 1500},function () {
                    /*获取评论列表*/
                   window.location.href="/home/friend/homeListPage"
                });
            } else {
                layer.msg(res.msg, {icon: 2, time: 1500});
            }
        })


    }
    var that = this;
    var app = new Vue({
        el: "#container",
        data: {
            newsId: ""//电影ID
            ,newsCommentList: ""
            ,initLayui: false//是否可以渲染layui，请求到数据后才可以
        },
        created: function () {
            var url = window.location.href ;
            var number = url.lastIndexOf("/");
            var sub = url.substring(number+1);
            this.newsId=sub;

        },
        methods:{
            softDel:function (id,userId) {
                var loginUser=$("#userId").val();
                if(userId!=loginUser){
                    layer.msg("非本人评论，不可删除！", {icon: 2, time: 1500});
                }else{
                    var url="/home/newsComment/deleteById";
                    $.post(url,{"id":id},function (res) {
                        if (res.success == true) {
                            layer.msg(res.msg, {icon: 1, time: 1500},function () {
                                /*获取评论列表*/
                                pagination(pageIndex, pageSize);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1500});
                        }
                    })
                }
            },
            softDelPost:function () {
                softDelPost();
            }

        },
        watch: {//监听data中的数据变化
            'initLayui': function (newVal) {
                if (newVal)
                    that.initLayui();
            }
        }
    });

    var pageIndex = 1;
    var pageSize = 10;
    var totalCount = 10;
    /*异步请求用户数据*/
    function pagination(pageIndex, pageSize) {
        var newsId = app.$data.newsId;
        var requestPath = "/home/newsComment/list/" + pageIndex + "/" + pageSize+"/?newsId="+newsId ;
        $.get(requestPath, function (res) {
            totalCount = res.data.pageInfo.total;
            app.$data.newsCommentList = res.data.commentList;
            app.$data.initLayui = true;
            $(".layui-laypage-count").html("共 "+totalCount+" 条");
        });
    };

    /*获取评论列表*/
    pagination(pageIndex, pageSize);
    $(function () {
        $("#mySubmit").on('click',function (index) {
            var userId=$("#userId").val();
            var newsId=$("#newsId").val();
            var content=$("#content").val();
            var url="/home/newsComment/add"
            $.post(url,{"newsId":newsId,"userId":userId,"content":content},function (res) {
                if (res.success == true) {
                    layer.msg(res.msg, {icon: 1, time: 1500},function () {
                        /*获取评论列表*/
                        pagination(pageIndex, pageSize);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1500});
                }
            })
        });
    })

</script>
</body>
</html>
